<template>
  <!-- 施工区域设置 -->
  <base-breadcrumb>
    <div class="page-body">
      <a-card :bordered="false">
        <title-name title="施工区域设置" />
        <div class="table-operateors mb20">
          <a-button type="primary" icon="plus" @click="handleOperate('add')">新增施工区域</a-button>
        </div>
        <s-table
          :scroll="{ x: 1800 }"
          ref="table"
          size="default"
          rowKey="key"
          :columns="columns"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <template slot="operator" slot-scope="text, record">
            <a class="base-btn" @click="handleOperate('edit', record)">编辑</a>
          </template>
        </s-table>
      </a-card>
    </div>
    <!-- 增改弹窗 -->
    <update-area v-if="visible.update" @cancel="visible.update = false" />
  </base-breadcrumb>
</template>

<script>
import UpdateArea from './UpdateArea.vue'
import { STable } from '@/components'
export default {
    name:'a'+Date.now(),  components: {
    STable,
    UpdateArea,
  },
  data() {
    return {
      visible: {
        update: false,
      },
      columns: [
        {
          title: '施工区域',
          dataIndex: 'areaName',
        },
        {
          title: '安全责任人',
          dataIndex: 'responsible',
        },
        {
          title: '分包商',
          dataIndex: 'subBusiness',
        },
        {
          title: '状态',
          dataIndex: 'status',
        },
        {
          title: '操作',
          dataIndex: 'operator',
          scopedSlots: { customRender: 'operator' },
        },
      ],
      queryParam: {},
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return new Promise((resolve, reject) => {
          resolve({
            currentPage: 1,
            totalSize: 2,
            data: [
              {
                name: '钢筋工',
                status: 0,
              },
              {
                name: '架子工',
                status: 1,
              },
            ],
          })
        })
      },
    }
  },
  methods: {
    handleOperate() {
      this.visible.update = true
    },
  },
}
</script>

<style lang="less" scoped>
.page-body {
  .table-operateors {
    .ant-btn + .ant-btn {
      margin-left: 12px;
    }
  }
}
</style>